<template>
    <div ref="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

let mymap: Map;
export default defineComponent({
    name: '',
    data() {
        return {
            mymap: Map
        }
    },
    components: {},
    mounted() {
        mymap = new Map({
            layers: [
                new TileLayer({
                    source: new OSM(),
                }),
            ],
            target: this.$refs.map as HTMLElement,
            view: new View({
                center: [0, 0],
                zoom: 2,
            }),
        })
        document.getElementById('zoom-out')!.onclick = () => {
            const view = mymap.getView();
            const zoom = view.getZoom();
            view.setZoom(zoom - 1);
        };

        document.getElementById('zoom-in')!.onclick = () => {
            const view = mymap.getView();
            const zoom = view.getZoom();
            view.setZoom(zoom + 1);
        };

    },
    activated() {
        console.log("osm activated触发了")
    },
    deactivated() {
        console.log("osm deactivated触发了")
    },
})
</script>

<style scoped>
.map {
    width: 100%;
    height: calc(100vh - 80px);
}
</style>

